;; (function ($) {
    var bigdata = [];
    var goods_list = null;
    var aindex = null;
    var newgoods = null;
    var imgdata = [];
    fetch("../pxx.json")
        .then(response => {
            //配置项，需要配置结束之后继续返回;
            return response.json();
        })
        .then(data => {
            bigdata = bigdata.concat(data);
            goods_list = bigdata[0].goods_list;
            reader(1);

        })
    function reader(aindex) {
        newgoods = null;
        document.documentElement.scrollTop = 450;
        document.body.scrollTop = 450;
        var index = (aindex - 1) * 9;
        newgoods = goods_list.slice(index, index + 9);
        //console.log(newgoods);
        $(".goods_r_c").html(null);
        var str = "";
        newgoods.forEach(elt => {
            str += `<div class="goods_r_c_s" data-id="${elt.goods_id}">
            <a href="./details.html"><img src="./images/shop.jpg" alt="" data-src="${elt.hd_thumb_url}" class="img"></a>
                <p class="goods_r_c_s_p1">${elt.goods_name}</p>
                <p class="goods_r_c_s_p2">
                    <span>￥${(elt.normal_price / 100).toFixed(2)}</span>
                    <span class="p2_span">￥${(elt.market_price / 100).toFixed(2)}</span>
                    <span>已团<span>3.3万</span>件</span>
                </p>
            </div>`
        });
        $(".goods_r_c").html(str);
        lazyload(".goods_r_c .img");

    }
    //分页
    var ul = document.getElementById('ul');
    var li = ul.getElementsByTagName('li');
    li[2].className = 'background';
    var num01 = 1;
    // 总页数
    var num02 = 6;
    //1首页的点击事件
    li[0].onclick = function () {
        Background(2);
        num01 = 1;
        content(num01);
        reader(1);

    }
    //2 尾页的点击事件
    li[li.length - 1].onclick = function () {
        Background(li.length - 3);
        num01 = num02 - (li.length - 5);
        content(num01);
        reader(num01);

    }
    //3 上一页的点击事件
    li[li.length - (li.length - 1)].onclick = function () {

        for (var j = 0; j < li.length - 4; j++) {
            if (li[j + 2].className == 'background' && li[j + 2].innerHTML != 1) {
                if (j + 2 != li.length - (li.length - 2)) {
                    Background(j + 1);
                }
                break;
            }
        }
        if (j + 2 == li.length - (li.length - 2)) {
            num01--;
            content(num01);
            reader(num01);
        }

    }
    //4 下一页的点击事件
    li[li.length - 2].onclick = function () {
        for (var j = 0; j < li.length; j++) {
            if (li[j].className == 'background' && li[j].innerHTML < num02) {  //* && 写最后一页的总数*/
                if (j + 1 < li.length - 2) {
                    Background(j + 1);
                }
                break;
            }
        }
        if (j + 1 == li.length - 2) {
            num01++;
            content(num01);
            reader(num01);
        }

    }
    //分页的点击事件
    for (var i = 0; i < li.length - 4; i++) {
        li[i + 2].index = i + 2;
        li[i + 2].onclick = function () {
            Background(this.index);
        }

    }
    //把所有的分页背景去掉，给指定的分页添加背景颜色
    function Background(num) {
        for (var i = 0; i < li.length; i++) {
            li[i].className = li[i].className.replace('background', '');
            li[num].className = 'background';
            aindex = li[num].innerHTML;

        }
        if (aindex != 1) { reader(aindex) };
        console.log(aindex);
    }
    // 给li 写内容
    content(num01);
    function content(number) {
        for (var i = 0; i < li.length - 4; i++) {
            li[i + 2].innerHTML = number;
            number++;
        }
    }
    // 懒加载
    var timer = null;
    var cHeight = document.documentElement.clientHeight;
    function lazyload(selector) {
        let imgList = document.querySelectorAll(selector);
        // 元素的offset操作会导致页面回流;
        let itemArray = Array.from(imgList).map(item => {
            return {
                img: item,
                top: item.offsetTop,
                src: item.getAttribute("data-src")
            }
        })
        load(itemArray);
        // window.addEventListener 第一个页面的监听没有关，就会影响第二个监听
        // 所以用onscroll,一次只能绑定一个。！！！！！！
        window.onscroll = load.bind(null, itemArray);
    }
    function load(itemArray) {
        if (timer !== null) return; // 节流; 
        timer = setTimeout(() => {
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            var min = scrollTop + cHeight;
            itemArray.forEach(item => {
                if (item.top < min) {
                    item.img.src = item.src;
                }
            })

            timer = null;
        }, 500)
    }

    // 点击进入详情页得到id
    var goodscontent = $(".goods_r_c");
    var detaildate = null;
    goodscontent.on("click", ".goods_r_c_s", goodid);
    function goodid() {
        detaildate = null;
        var nowid = $(this).attr("data-id");
        console.log(nowid);
        newgoods.forEach(ele => {
            // key一定要加一个双引号
            if (nowid == ele["goods_id"]) {
                detaildate = ele;
                console.log(detaildate);
                return;
            }
            // var str = "";
            // str = "./details.html/?" + nowid;
            // location.href = str;
        })
    }
    // 面包屑
    var lis = document.querySelectorAll(".goods_r_t_left ul li a")[1];
    var goods_l_t = document.querySelector(".goods_l_t");
    window.addEventListener("load", function () {
        var b = window.localStorage.getItem("boadli")
        readerboard(b);
    })
    function readerboard(b) {
        lis.innerHTML = b;
        goods_l_t.innerHTML = b;
    }

    // 排序,点击出来div,其他就隐藏
    document.onclick = function (e) {
        $(".select_box ul").hide();
    }
    $('.span_b').on("click", function (e) {
        if ($(".select_box ul").css("display") == "none") {
            $(".select_box ul").show();
        } else {
            $(".select_box ul").hide();
        }
        e = e || event;
        stopFunc(e);
    });

    $('.select_box ul').on("click", function (e) {
        e = e || event;
        stopFunc(e);
    });
    //event.stopPropagation() 方法阻止事件冒泡到父元素   　　
    function stopFunc(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }

    // 获取cookie   
    function getCookie(key) {
        var _cookie = document.cookie;
        // "key=value; key2=value; key3=value";
        var _cookie_item = _cookie.split("; ");
        var _key = [];
        var _value = _cookie_item.map(item => {
            var _temp = item.split("=");
            _key.push(_temp[0]);
            return _temp[1];
        })
        var index = _key.indexOf(key);
        if (index !== -1) {
            return _value[index];
        }
        return "";
    }
    // function renderHTML() {
    //     let cookieValue = getCookie("username");
    //     var text = document.getElementById("loginreg");
    //     text.innerHTML = cookieValue;
    // }
    // renderHTML();
})(jQuery);